<template>
	<view class="content">
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" 
			v-if="heis.length == 0" text="快去发布一篇嘿文吧">
		</u-empty>

		<view class="hei-view shadow-light fadeIn-d3s" v-for="(hei, i) in heis" :key="i">
			<view class="hei-user-view" @tap="onUserTap(hei.email)">
				<image class="hei-avatar" :src="hei.avatar" mode="aspectFill"></image>
				<text class="hei-username">{{ hei.username }}</text>
			</view>
			<view class="hei-content-view" @tap="onHeiTap(hei.heiId)">
				<image class="hei-image" :src="hei.images[0].src" mode="aspectFill"></image>
				<view class="hei-info">
					<view class="hei-title">{{ hei.title }}</view>
					<view class="hei-content">{{ hei.content }}</view>
				</view>
			</view>
			<view class="hei-button-view">
				<text class="hei-likes">喜欢：{{ hei.likes }}</text>
				<text class="hei-collects">收藏：{{ hei.collections }}</text>
				<text class="hei-collects">浏览：{{ hei.views }}</text>
				<view class="hei-button-group">
					<view class="hei-button-edit iconfont"
						@tap="onEditHeiTap(hei.heiId)">&#xe761;</view>
					<view class="hei-button-del iconfont" 
						@tap="onDelHei(hei.heiId)">&#xe74e;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHeiByEmail,
		deleteHei
	} from "@/network/HeiApi.js";
	export default {
		data() {
			return {
				heis: [],
			}
		},
		
		onPullDownRefresh() {
			this.refreshData();
		},
		
		onShow() {
			this.refreshData();
		},
		
		methods: {
			refreshData: function() {
				getHeiByEmail(this.getData("email")).then(data => {
					this.heis = data.content;
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					uni.showModal({
						title: "获取嘿文失败",
						content: err
					});
				});
			},
			
			/**
			 * 嘿文点击事件
			 * @param {Object} heiId
			 */
			onHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/hei/hei?heiId=" + heiId
				});
			},
			
			/**
			 * 用户信息点击事件，跳转用户详情页
			 * @param {Object} email
			 */
			onUserTap: function(email) {
				uni.navigateTo({
					url: "/pages/user/user?email=" + email
				});
			},
			
			/**
			 * 删除嘿文点击事件
			 * @param {Object} heiId
			 */
			onDelHei: function(heiId) {
				let that = this;
				uni.showModal({
					title: "确定要删除嘿文吗",
					content: "此操作不可逆，确认删除吗",
					success: function(res) {
						if (res.confirm) {
							deleteHei(heiId).then(data => {
								that.toast("删除成功");
								that.refreshData();
							}).catch(err => {
								uni.showModal({
									title: "删除失败",
									content: err
								});
							});
						}
					}
				})
			},
			
			/**
			 * 编辑嘿文单击事件
			 * @param {Object} heiId
			 */
			onEditHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/addHei/addHei?mode=edit&heiId=" + heiId
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
	}
	
	.hei-view {
		padding-bottom: 0px;
		border-radius: 20px;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.hei-user-view {
		height: 50rpx;
		line-height: 50rpx;
		border-bottom: 1px solid $u-info-light;
		padding: 20rpx;
		padding-bottom: 10rpx;
		transition: ease-out all .2s;
	}
	
	.hei-user-view:active {
		background-color: $u-info-light;
	}
	
	.hei-avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 99px;
	}
	
	.hei-username {
		vertical-align: top;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	.hei-content-view {
		padding: 20rpx;
		padding-bottom: 10rpx;
		transition: ease-out all .2s;
	}
	
	.hei-content-view:active {
		background-color: $u-info-light;
	}
	
	.hei-image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20px;
	}
	
	.hei-info {
		display: inline-block;
		vertical-align: top;
		margin-left: 20rpx;
		width: 65.8%;
		overflow: hidden;
	}
	
	.hei-title {
		color: var(--titleColor);
		font-size: 32rpx;
	}
	
	.hei-content {
		color: var(--contentColor);
		font-size: 26rpx;
		margin-top: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}
	
	.hei-button-view {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		border-top: 1px solid $u-info-light;
		position: relative;
	}
	
	.hei-likes {
		color: var(--secColor);
		font-size: 24rpx;
	}
	
	.hei-collects {
		color: var(--secColor);
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	
	.hei-button-group {
		position: absolute;
		right: 0px;
		bottom: 0px;
		text-align: center;
		font-size: 50rpx;
		overflow: hidden;
	}
	
	.hei-button-edit {
		display: inline-block;
		background-color: $u-warning;
		width: 160rpx;
		color: white;
		transition: ease-out all .2s;
	}
	
	.hei-button-edit:active {
		background-color: $u-warning-dark;
	}
	
	.hei-button-del {
		display: inline-block;
		background-color: $u-error;
		width: 160rpx;
		color: white;
		transition: ease-out all .2s;
	}
	
	.hei-button-del:active {
		background-color: $u-error-dark;
	}
</style>
